import { observer } from 'mobx-react-lite';

const ArmatureProperty = observer((props: any) => {

    return (
        <div className='text-sm space-y-2 p-3'>
            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Name:</div>
                <div className='flex-1 flex justify-start'>
                    Armature
                </div>
            </div>

            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Type:</div>
                <div className='flex-1 flex justify-start'>
                    Armature
                </div>
            </div>

            <div className='flex'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>FrameRate:</div>
                <div className='flex-1 flex justify-start'>
                    24fps
                </div>
            </div>

            <div className='flex items-center'>
                <div className='basis-24 shrink-0 flex justify-start items-center'>Default Animation:</div>
                <div className='flex-1 flex justify-start'>
                    <select id="countries" className="w-full rounded-sm border-gray-200 shadow-sm p-0 text-black">
                        <option selected>Choose a country</option>
                        <option value="US">United States</option>
                        <option value="CA">Canada</option>
                        <option value="FR">France</option>
                        <option value="DE">Germany</option>
                    </select>
                </div>
            </div>
        </div>
    )
})

export { ArmatureProperty }
